/*
 * 
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃ 　
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃　　　　　　　　　　　
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug　　
 * 　　　┃　　　┃　　+　　　　　　　　　
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 * 
 * 
 * @Descripttion: 
 * @version: 
 * @Author: vai-bowei
 * @Date: 2021-10-14 20:03:26
 * @LastEditors: vai-bowei
 * @LastEditTime: 2021-10-20 09:52:08
 */

import { Component } from 'react'
import { View, Image, Text } from '@tarojs/components'
// import {AtSwitch, AtForm} from 'taro-ui'
import './index.scss'

export default class LgTarBarItem extends Component {
    constructor () {
      super(...arguments)
      this.triggerState = this.triggerState.bind(this);
    }
    state = {
        data:{}
    }
    componentDidMount(){
        console.log(this.props.data.index)
        this.setState({ data:this.props.data })
    }
    componentWillReceiveProps(np){
        if(this.props.data.isSelected != np.data.isSelected){
            this.setState({ data:np.data })
        }
    }
    triggerState(){
        this.props.triggerState && this.props.triggerState(this.props.index)
    }
    render(){
        const { imageUrl, name, selectedName, selectedImageUrl, isSelected } = this.state.data || {}
        , index = this.props.index || ''
        , style = { width:this.props.width + '%' }
        //图片判断
        , showImageUrl = isSelected ? (selectedImageUrl || imageUrl) : imageUrl//当前显示图片
        //标题判断
        const curNum = '标题'+(index+1) // 标题1起
        // , showName = isSelected ? (selectedName || curNum) : (name || curNum)//当前显示标题
        , showName = isSelected ? (name || curNum) : (name || curNum)//当前显示标题
        , showNameSty = isSelected ? { color:this.state.data.selectedNameColor || 'rgb(0,144,255)'} : {}
        return (
            <View className="a_tarbar_item" onClick={this.triggerState} style={ style }>
                {
                    showImageUrl ? (
                        <Image src={showImageUrl} className="tarbar_item_img" mode="scaleToFill"></Image>
                    ) : (
                        <View className="tarbar_item_img icon-e00101"></View>
                    )
                }
                <View className={ 'tarbar_item_txt oneline' + (isSelected ? ' tarbar_item_txt_cho' : '')} style={showNameSty}>{showName}</View>
            </View>
        )
    }
}